<template>
    <div>
        <ul>
            <li v-for="(task, index) in incompletedTasks" :key="index">
                {{ task.name }}
                <button @click="complete(task)">Complete</button>
            </li>
        </ul>
        <br>
        <ul>
            <li v-for="(task, index) in completedTasks" :key="index">
                <del>{{ task.name }}</del>
            </li>
        </ul>
        <br>
        <h2>New Task</h2>
        <form @submit.prevent="add">
            <p>
                <label>Name: <input v-model="newTaskName"></label>
            </p>
            <button type="submit">Add</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tasks: [
                {
                    name: 'Get the Paper',
                    completed: true,
                },
                {
                    name: 'Submit the answer sheet',
                    completed: false,
                },
                {
                    name: 'Pass the test',
                    completed: false,
                },
            ],
            newTaskName: '',
        };
    },
    computed: {
        incompletedTasks() {
            return this.tasks.filter((task) => !task.completed);
        },
        completedTasks() {
            return this.tasks.filter((task) => task.completed);
        },
    },
    methods: {
        complete(task) {
            task.completed = true;
        },
        add() {
            // 添加的不能为空
            if (this.newTaskName.trim() !== '') {
                this.tasks.push({
                    name: this.newTaskName,
                    completed: false,
                });
                this.newTaskName = '';
            }
        },
    },
};
</script>
